<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		body{
			background-color: #ffa5a5;
		}
			.div1{
				width: 200px;
				height: 200px;
				background-color: #d5093c;
				/*阴影     第一个值 水平方向	第二个值 垂直方向	第三个值模糊度*/
				box-shadow: 0px 0px 70px #d5093c;
				/*执行动画调用      infinite 循环*/
				animation: 1s aj infinite;
			}
			.lef,.rig{
				/*圆角指令*/
				border-radius: 100px;
				/*左上右下		右上左下*/
				/*border-radius: 20px  60px;*/
				/*border-radius: 20px 30px 40px 50px;*/
			}
			.cen{
				/*旋转*/
				transform: rotate(45deg);
				position: absolute;
				top: 269px;
				left: 271px;
			}
			.lef{
				position: absolute;
				top: 200px;
				left:200px;
			
			}
			.rig{
				position: absolute;
				top: 200px;
				left: 341px;
			}
			div:hover{
				/*放在倍数*/
				/*transform: scale(1.3);*/
				/*位移  第一个值  x:水平方向      第二个值：y   垂直位 移   负数向上*/
				/*transform: translate(0px,-5px);*/
				/*2D角度的旋转*/
				/*transform: skew(40deg,45deg);*/
			}
			/*css3动画*/
			@keyframes aj{
				0%{transform: scale(1.0)rotate(45deg);}
				50%{transform: scale(1.1)rotate(45deg);}
				100%{transform: scale(1.0)rotate(45deg);}
			}
			/*不同浏览器*/
			@-moz-keyframes name{
				0%{transform: scale(1.0)rotate(45deg);}
				50%{transform: scale(1.1)rotate(45deg);}
				100%{transform: scale(1.0)rotate(45deg);}
			}
			@-ms-keyframes name{
				0%{transform: scale(1.0)rotate(45deg);}
				50%{transform: scale(1.1)rotate(45deg);}
				100%{transform: scale(1.0)rotate(45deg);}
				}
			@-webkit-keyframes name{
				0%{transform: scale(1.0)rotate(45deg);}
				50%{transform: scale(1.1)rotate(45deg);}
				100%{transform: scale(1.0)rotate(45deg);}
			}
		</style>
	</head>
	<body>
		<div class="div1 lef"></div>
		<div class="div1 cen"></div>
		<div class="div1 rig"> </div>
		
	</body>
</html>

